<include file="/public/header" />
<!-- // 重定位Style -->
<style>
    html, body,.layui-fluid, .layui-card,.layui-card-body,.layui-col-md3,.layui-col-md9 {
        height: 98%;
    }
    .layui-card-header.layuiadmin-card-header-auto {
        border-bottom: 0px;
        padding-bottom: 0px;
    }
    .layui-form-item .layui-input-inline .layui-form-radio {
        margin-right: -4px;
    }
    .eleTree-title {
        cursor: pointer;
    }

    .eleTree-group .eleTree-node .eleTree-title {
        position: relative;
        height: 36px;
        line-height: 36px;
    }
</style>
<div class="layui-col-md3">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header layuiadmin-card-header-auto">
            <button class="layui-btn" >{:__('请选择项目')}</button>
            <button class="layui-btn layui-btn-danger" >{:__('重载项目')}</button>
            <button id="apigroup" class="layui-btn" >{:__('查看分组')}</button>
        	</div>
            <div class="layui-card-body">
                <div id="tree"></div>
            </div>
        </div>
    </div>
</div>

<div class="layui-col-md9" >
    <!-- // 展示数据 -->
    <div class="layui-fluid">
        <div class="layui-card">
            <!-- // 默认操作按钮 -->
            <div class="layui-card-header layuiadmin-card-header-auto ">
            <div class="layui-form">
                <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <select name="status">
                            <option value="">{:__('按状态查询')}</option>
                            <option value="2" >{:__('正常')}</option>                                 
                            <option value="1" >{:__('禁用')}</option>                     
                        </select>
                    </div>  
                </div>

                <div class="layui-inline"><div class="layui-input-inline ">
                    <input name="name" class="layui-input" type="text" placeholder="{:__('关键字搜索')}"/></div>
                </div>

                <div class="layui-inline" >
                    <!-- // 默认搜索 -->
                    <button class="layui-btn icon-btn" lay-filter="formSearch" lay-submit><i class="layui-icon layui-icon-search"></i>{:__('搜索')}</button>
                    <!-- // 打开添加页面 -->
                    <button class="layui-btn icon-btn" lay-open="" lay-title="{:__('添加接口')}" lay-area="690px" lay-url="#editforms"  lay-callback="edits" >
                        <i class="layui-icon layui-icon-add-1"></i>{:__('添加')}
                    </button>
                    <!-- // 打开接口文档页面 -->
                    <php>
                        $urls = url('/wiki',[],false,'api'); 
                        $wikiUrl = str_replace($_SERVER['SCRIPT_NAME'],'',$urls);
                    </php>
                    <a class="layui-btn icon-btn" href="{$wikiUrl}"  target="_blank"  title="{:__('接口文档')}" >
                        <i class="layui-icon layui-icon-survey"></i>{:__('接口文档')}
                    </a>
                </div>
                </div>
            </div>   
            </div>

            <!-- // 创建数据实例 -->
            <table id="lay-tableList" lay-filter="lay-tableList"></table>        
        </div>
    </div>
</div>

<!-- // 添加编辑数据 -->
<script type="text/html" id="editforms" >
<div class="layui-fluid layui-bg-white">
    <form class="layui-form" lay-filter="editforms" >
    <input type="text" name="id" hidden="">

    <div class="layui-form-item">
        <label class="layui-form-label"><font color="red">* </font>{:__('项目分类')}</label>
        <div class="layui-input-inline">
            <select name="app_id" lay-filter="appid" >
            	<option value="">{:__('请选择项目')}</option>
            	<volist name="apps" id="vo"><option value="{$vo.id}">{$vo.name}</option></volist>
            </select>            
        </div>
        <label class="layui-form-label">{:__('项目分组')}</label>
        <div class="layui-input-inline">
            <div class="pid" name="pid" ></div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><font color="red">* </font>{:__('接口名称')}</label>
        <div class="layui-input-inline">
            <input name="name" placeholder="{:__('请输入接口名称')}" type="text" class="layui-input"  lay-verify="required" />
        </div>
        <label class="layui-form-label">{:__('验证类型')}</label>
        <div class="layui-input-inline">
            <select name="access" >
            	<option value="">{:__('请选择验证类型')}</option>
            	<option value="1" selected="" >{:__('简单认证')}</option>
            	<option value="2">{:__('token认证')}</option>
            </select>
        </div>

    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">{:__('接口类方法')}</label>
        <div class="layui-input-inline">
            <input name="class" placeholder="{:__('请选择接口类库方法')}" id="iconHhysFad" type="text" class="layui-input"  />
        </div>

        <label class="layui-form-label">{:__('请求类型')}</label>
        <div class="layui-input-inline" style="white-space: nowrap;">
            <input name="method" type="radio" value="0" title="{:__('GET')}"  />
            <input name="method" type="radio" value="1" title="{:__('POST')}" checked />
            <input name="method" type="radio" value="2" title="{:__('不限')}" />
        </div>

    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">{:__('接口映射')}</label>
        <div class="layui-input-inline">
            <input name="hash" placeholder="{:__('请输入接口映射，自动生成')}" type="text" class="layui-input"  />
        </div>
        <label class="layui-form-label"><font color="red">* </font>{:__('映射模式')}</label>
        <div class="layui-input-inline">
            <select name="model" >
            	<option value="">{:__('请选择接口模式')}</option>
            	<option value="0" >{:__('路由模式')}</option>
            	<option value="1" selected="" >{:__('映射模式')}</option>
            </select>
        </div>

    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">{:__('接口版本')}</label>
        <div class="layui-input-inline">
            <input name="version" placeholder="{:__('请输入接口版本')}" type="text" class="layui-input"  />
        </div>
        <label class="layui-form-label"><font color="red">* </font>{:__('是否鉴权')}</label>
        <div class="layui-input-inline">
            <input name="status" type="radio" value="1" title="{:__('开启')}" checked/>
            <input name="status" type="radio" value="0" title="{:__('关闭')}"/>
            <input name="status" type="radio" value="2" title="{:__('禁用')}"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><font color="red">* </font>{:__('接口描述')}</label>
        <div class="layui-input-inline" style="width: 500px">
            <input name="content" placeholder="{:__('请输入接口描述，如不需要请留空')}" type="text" class="layui-input"  />
        </div>
    </div>

    <div class="layui-footer layui-form-item layui-center "  >
        <button class="layui-btn layui-btn-primary" type="button" sa-event="closePageDialog" >{:__('取消')}</button>
        <button class="layui-btn" lay-add="{:url('/system.api/add')}" lay-edit="{:url('/system.api/edit')}" lay-filter="submitPage"  lay-submit>{:__('提交')}</button>
    </div>
    </form>
</div>
</script>

<!-- // 列表编辑框 -->
<script type="text/html" id="tableBar">
    <a class="layui-table-text" lay-title="{:__('编辑')} {{d.name}}" lay-callback="edits" lay-url="#editforms" lay-area="690px" lay-event="edit" >{:__('编辑')}</a>
	<div class="layui-divider layui-divider-vertical"></div>
    <a class="layui-table-text dropdown-btn" data-id="{{d.id}}" >{:__('更多')} <i class="layui-icon layui-icon-down" style="font-size:12px;top: -1px" ></i></a>
</script>

<!-- // 列表状态栏 -->
<script type="text/html" id="authStatus">
    <input type="checkbox" lay-filter="switchStatus" lay-url="{:url('/system.api/status')}" value="{{d.id}}" lay-skin="switch"
     {{d.status==1?'checked':''}}  />
</script>

<include file="/public/footer" />
<script src="__STATICADMIN__module/xmselect/xmselect.js"></script>
<script>
    layui.use(['admin','eleTree'], function () {

        var admin = layui.admin;
        var table = layui.table; 
        var eleTree = layui.eleTree;    
        var form = layui.form;    
        var jquery = layui.jquery;    
        var dropdown = layui.dropdown;   

        // 定义表格URL
        var tableURL = "{:url('/system.api/index')}",
            project = {$project|raw}; 

        // 基础表格
        var isTable = table.render({
            elem: "#lay-tableList"
            ,url: tableURL
            ,page: true
            ,cols: [[
                {type: 'checkbox'},
                {field: 'id', align: 'center',sort: true,width: 80,  title: 'ID'},
                {field: 'name', align: 'center', title: '{:__("接口名称")}'},
                {field: 'class', align: 'center', title: '{:__("接口类库")}'},
                {field: 'hash', align: 'center', title: '{:__("接口映射")}'},
                {field: 'method', align: 'center',templet: function (d) {
                    var strs = ['<span class="layui-badge layui-badge-green">GET</span>', 
                                '<span class="layui-badge layui-badge-blue">POST</span>',
                                '<span class="layui-badge layui-badge-red">不限</span>',
                                ];
                    return strs[d.method];
                 }, title: '{:__("请求方式")}'},
                {field: 'status', align: 'center',templet: '#authStatus', width: 135, title: '{:__("鉴权")}'},
                {field: 'createtime', align: 'center', width: 160,title: '{:__("创建时间")}'},
                {align: 'center', toolbar: '#tableBar',width: 180, title: '{:__("操作")}'},
            ]]
            ,parseData: function(res){

                // 缓存其他数据
                for (let name in res.data) {
                   if (name != 'item') {
                        table.cache[name] = res.data[name];
                   }
                }

                return {
                  "code": res.code, 
                  "msg": res.msg, 
                  "count": res.count,
                  "data": res.data.item 
                };
            }
            ,done:function(res) {

                dropdown.render({
                    elem: '.dropdown-btn'
                    ,data: [{
                      title: '请求参数'
                      ,event: 'request'
                    }
                    ,{
                      title: '返回参数'
                      ,event: 'restful'
                    }
                    ,{
                      title: '删除'
                      ,event: 'delete'
                     ,templet: '<font color="red">{{d.title}}</font>'
                    }]
                    ,click: function(data, othis){

                        var elem = layui.jquery(this.elem)
                        ,listId = elem.data('id');
                        switch(data.event) 
                        {
                            case 'request':
                                layer.open({
                                        type: 2,
                                        title: "请求参数",
                                        area: ['80%','80%'],
                                        content: "{:url('/system.api/params/')}id/"+ listId,
                                        success: function() {}
                                    })
                            break;
                            case 'restful':
                                 layer.open({
                                     type: 2,
                                     title: "返回参数",
                                     area: ['80%','80%'],
                                     content: "{:url('/system.api/restful/')}id/"+listId,
                                     success: function() {}
                                 }) 
                            break;
                            case 'delete':
                                 layui.$.get("{:url('/system.api/del')}",{
                                     id:listId
                                 },function(res) {
                                     if (res.code == 200) {
                                         layui.iziToast.success({
                                             message: res.msg,
                                         })
                                         table.reload('lay-tableList');
                                     }
                                     else {
                                         layui.iziToast.error({
                                             message: res.msg,
                                         })                                      
                                     }
                                 })
                            break;
                            default:
                        }
                    }
                });
            }
        });

        // 创建APP实例
        var appTree = eleTree({
            el: '#tree',
            data: project,
            highlightCurrent: true,
            showLine: false,
            defaultPid: 0,
            request: {
                name: "name",
            },
            defaultExpandAll: true,
        })

        // 重载表格数据
        var app_id = undefined;
        appTree.on('click',function(event) {
            app_id = event.data.id;
            var url = tableURL + '?app=' + event.data.id;
            table.reload('lay-tableList', {
                url: url
            });
        })

        // 查看API分组
        layui.jquery('#apigroup').click(function(e) {
            if (app_id == undefined) {
                layui.iziToast.error({
                    message: '请选择项目',
                })
                return false;
            }
            layui.layer.open({
                type: 2,
                title: '编辑分组',
                area: ['800px','600px'],
                content: "{:url('/system.api/group/')}app_id/"+app_id,
                success: function(r) {}
            })
        })

        // 编辑函数重载
        admin.callback.edits = function(clickthis,colletction,config) {

            var tableThis = colletction.tableThis;
            var data = undefined,checkedId = [];
            if (typeof(tableThis) !== "undefined") {
                if (tableThis.data.pid !== 0) {
                    checkedId.push(tableThis.data.pid);
                }
                data = table.cache.group[tableThis.data.app_id];
            } else {
                for (let name in table.cache.group) {
                    data = table.cache.group[name];
                    break;
                }
            }

            // 初始化组件
            var buildXmSelect = function(data) {
                    xmSelect.render({
                    el: '.pid',
                    tips: '请选择分组',
                    name: 'pid',
                    data: data,
                    radio: true,
                    clickClose: true,
                    initValue: checkedId,
                    prop: {
                        value: 'id',
                        name:'name'
                    },
                    tree: {
                        show: true,
                        strict: false,
                        showLine: false,
                        clickExpand: false,
                    },
                    model: { 
                        icon: 'hidden',
                        label: { 
                            type: 'text' 
                        } 
                    },
                    theme: {
                        color: '#1890FF'
                    }
                });
            }

            buildXmSelect(data);
            form.on('select(appid)', function(elem){
                if (elem.value) {
                    data = table.cache.group[elem.value];
                    buildXmSelect(data);
                }
            });

            // 监听提交
            form.on("submit(submitPage)",function(post) {

                var pageThat = jquery(this);
                pageThat.attr("disabled",true);
                 // 获取提交地址
                if (typeof(tableThis) !== 'undefined') {
                    _pageUrl = tableThis.event === 'edit' ? pageThat.attr('lay-edit') : pageThat.attr('lay-add');
                }else {
                     _pageUrl = pageThat.attr('lay-add');
                }
                
                if (typeof(_pageUrl) === 'undefined') {
                    layui.iziToast.info({
                        message: '按钮缺少 url 属性',
                    });   
                    return false;
                }
                
                // 开始POST提交数据
                jquery.post(_pageUrl, 
                    post.field, function(res){
                        if (res.code == 200) {
                            layui.iziToast.success({
                                message: res.msg,
                            });
                            isTable.reload();
                            layer.close(colletction.index);
                        }
                        else {
                            layui.iziToast.error({
                                message: res.msg,
                            });                               
                        }
                }, 'json');
                return false;                        
            })
        }
    });
</script>
